<template>
	<div class="audiocontentpage">
		<van-cell>
			<template #title>
				<van-image round width="2rem" height="2rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
				<div style="font-size: 12px;margin-left:5px" @click="$router.push({name:'shopindex'})">{{shopname}}
				</div>
			</template>
			<template #right-icon>
				<div class="van-cell_righticon">
					<van-icon name="search" class="search-icon" style="font-size:18px;margin-right:15px;"
						@click="$router.push({name:'search'})" />|&nbsp;<div style="font-size: 12px;"
						@click="$router.push({name:'my'})">个人中心</div>
				</div>
			</template>
		</van-cell>
		<div class="prism-player" id="player-con"></div>
		<div style="height: 100px;background: white;display: flex;flex-direction: column;">
			<div class="ml-10" style="font-size:16px;font-weight: bold;margin-top: 20px;">{{item.title}}</div>
			<div class="ml-10" style="font-size:10px;color:#aaa;margin-top:15px">{{item.create_time}} | {{item.view}}次学习
			</div>
		</div>
		<div style="height:5px;background:#eee" />
		<div>
			<van-tabs v-model="active">
				<van-tab title="详情">
					<div v-html="item.custom_desc"></div>
				</van-tab>
				<van-tab title="评论">
					<div class="mt-10 ml-10" style="width: 100vw;display: flex;" v-for="(item,index) in list"
						:key="index">
						<!-- <div>
                            <div><img style="width:30px; height:30px; border-radius:50% ; border: 1px solid red;" :src="item.img">
                                <span class="ml-10"  style="font-size:8px;color:#aaa">{{item.name}}</span>
                            </div>
                            <div>
                                <span style="font-size:10px;margin-left: 1rem;">{{item.text}}</span>
                            </div>
                        </div>
                        <div class="mt-10">
                            <span class="ml-10" style="font-size:8px;color:#aaa">{{item.time}}</span>
                            <a href=""  style="font-size:8px;color:#aaa;margin-left: 1rem;">回复</a>
                        </div> -->
						<div class="box_left">
							<img style="width:30px; height:30px; border-radius:50% ;" :src="item.img">
						</div>
						<div class="box_right">
							<span class="ml-10" style="font-size:8px;color:#aaa">{{item.name}}</span>
							<div>
								<span style="font-size:10px;margin-left: 0.6rem;">{{item.text}}</span>
							</div>
							<div class="mt-10">
								<span class="ml-10" style="font-size:8px;color:#aaa">{{item.time}}</span>
								<a @click="show=true" style="font-size:8px;color:#aaa;margin-left: 1rem;">回复</a>
							</div>
							<van-collapse v-model="activeName">
								<van-collapse-item title="展开回复" :name="index">
									<div class="mt-10 ml-10" style="width: 100vw;display: flex;"
										v-for="(item,index) in list" :key="index">
										<div class="box_left">
											<img style="width:30px; height:30px; border-radius:50% ;" :src="item.img">
										</div>
										<div class="box_right">
											<span class="ml-10" style="font-size:8px;color:#aaa">{{item.name}}</span>
											<div>
												<span style="font-size:10px;margin-left: 0.6rem;">{{item.text}}</span>
											</div>
											<div class="mt-10">
												<span class="ml-10"
													style="font-size:8px;color:#aaa">{{item.time}}</span>
												<a href="" style="font-size:8px;color:#aaa;margin-left: 1rem;">回复</a>
											</div>
										</div>
									</div>
								</van-collapse-item>
							</van-collapse>
						</div>
					</div>
				</van-tab>
				<van-tab title="课程评价"><xjevaluate :info_id="id" type="audio"></xjevaluate></van-tab>
				<van-tab title="相关推荐"><xjtjcourse :category_id="category_id"></xjtjcourse></van-tab>
			</van-tabs>
		</div>
		<van-tabbar active-color="#000" inactive-color="#000">
			<van-tabbar-item icon="notes-o" @click="$refs.dirpopup.show=true;">课程目录</van-tabbar-item>
			<van-tabbar-item icon="gift-o" @click="topresented('invite')">请好友看</van-tabbar-item>
			<van-tabbar-item icon="chat-o" @click="show=true">写评论</van-tabbar-item>
		</van-tabbar>
		<!-- 评论弹出层 -->
		<van-action-sheet v-model="show">
			<van-field v-model="message" rows="2" autosize type="textarea" maxlength="30" placeholder="请输入评论"
				show-word-limit>
				<template #button>
					<van-button type="primary" size="small" class="btn" @click="comment">发表</van-button>
				</template>
			</van-field>
		</van-action-sheet>


		<!-- <van-action-sheet v-model="cellshow" title="标题">

			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" >
					<div class="mt-10 ml-10" style="width: 100vw; position: relative;" v-for="(item,index) in list"
						:key="index" @click="clickproduct(item.id,item.type)">
						<div>
							<van-tag type="primary" v-if="item.try_type">试看</van-tag>
							<van-icon name="shield-o" v-if="!item.try_type" size="18px" />
							<span class="ml-10" style="font-size:14px;font-weight:bold;">{{item.title}}</span>
						</div>
						<div class="mt-10"><span style="font-size:10px">
								<van-tag type="success" style="font-size: 6px;">{{item.type|formatType}}
								</van-tag>
							</span><span class="ml-10" style="font-size:8px;color:#aaa;">{{item.create_time}} |
								{{item.view}}次学习{{index}}</span><span>
								<van-goods-action-button type="danger" text="立即购买" @click="clickbuy"
									style='width: 80px;position: absolute; right: 10px; bottom: 20px; height: 30px;' />
							</span></div>
						<van-divider />
					</div>
				</van-list>
			</van-pull-refresh>
		</van-action-sheet> -->
		<xjdirpopup ref="dirpopup"></xjdirpopup>
	</div>

</template>

<script>
import xjevaluate from '@/components/frontshop/xjevaluate.vue';
import xjtjcourse from '@/components/frontshop/xjtjcourse.vue';
import xjdirpopup from '@/components/frontshop/xjdirpopup.vue';
import showfileMixin from '@/mixin/showfrontossfile.js';
export default {
	components: {
        xjevaluate,
		xjtjcourse,
		xjdirpopup
    },
	data() {
		return {
			knowledgelist: "",
			page: 1,
			list: [],
			finished: true,
			refreshing: false,
			cellshow: false,
			loading: false,
			show: false,
			shopname: localStorage.getItem('shopname')?localStorage.getItem('shopname'):'',//店铺名
			active: 0, //默认详情
			item: '',
			id: '',//单个知识id
			message: "",
			list: [
				{ name: "橘子", img: "img", text: "123", time: "2022.10.10" },
				{ name: "苹果", img: "img", text: '456', time: "2022.1.1" }
			],
			activeName: ['1'],
			category_id:''
		}
	},
	methods: {
		async topresented() {
            const friendform = { id: this.$route.query.id, columnid: this.$route.query.columnid };
            let res = await this.$frontaxios.post(this.$front.api_doShareInfoInviteFriend, friendform);
            console.log(res);
            navigator.clipboard
                .writeText(res.data.url)
                .then(() => {
                    this.$message.success('复制成功,去发送给好友吧');
                })
                .catch((err) => {
                    this.$message.error('复制失败');
                });
        },
		comment() {
			this.$notify({ type: 'success', message: '发表成功' })
			this.show = false
			console.log(this.message);
			let time = new Date()
			console.log(time);
			const obj = {
				name: this.shopname,
				img: "https://img01.yzcdn.cn/vant/cat.jpeg",
				text: this.message,
				time
			}
			this.list.push(obj)
			this.message = ""
		},
		async onLoad() { //加载多个视频列表
			this.cellshow=true
			console.log(1);
			if (this.refreshing) {
				this.list = [];
				this.refreshing = false;
			}
			await this.getKnowledgeList(this.id);
			this.list.push(...this.knowledgelist);
			this.page++;
			this.loading = false;
			if (this.list.length >= this.total) {
				this.finished = true;
			}
		},
		onRefresh() {
			// 清空列表数据
			this.finished = false;

			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			this.onLoad();
		},

	},
	mixins: [showfileMixin],
	destroyed() {
        // 销毁监听
		//this.player.dispose();
        //clearInterval(this.stime);
    },
	async mounted() {
		this.id = this.$route.query.id;
		let query = {
			id: this.id,
			columnid:this.$route.query.columnid
		};
		let res0 = await this.$frontaxios.post(this.$front.getOneKnowledge, query);
		console.log(res0);
		if(res0.code==1){
		this.category_id=res0.data.category_id;
		this.item = res0.data;
		let audio = this.item.audio;
		let path = audio.path + audio.name;
		let res = await this.getSignatureUrl(path);
		//console.log(res);
		/* Custom events for skipping ads. These parameters are provided by the many audio ad component. */
		var manyVideoAdClose = function (manyVideoAd) {
			/* Register the pause event to pause the ad. */
			manyVideoAd.pauseManyVideoAd()
			var result = confirm('确定开通会员关闭广告吗？')
			if (result) {
				/* Register the skip event to skip the ad. */
				manyVideoAd.closeManyVideoAd()
			} else {
				/* Register the play event to play the ad. */
				manyVideoAd.playManyVideoAd()
			}
		}
		var player = new Aliplayer({
			id: "player-con",
			source: res, //播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
			"width": "100%",
			"height": "210px",
			"autoplay": true,
			"isLive": false,
			"rePlay": false,
			"playsinline": true,
			"preload": true,
			"controlBarVisibility": "hover",
			"useH5Prism": true,
			// components: [{ //广告插件
			// 	name: 'ManyVideoADComponent',
			// 	type: AliPlayerComponent.ManyVideoADComponent,
			// 	args: [
			// 		[{
			// 				adVideo: 'https://alivc-demo-cms.alicdn.com/audio/audioAD.mp4',
			// 				adVideoLink: 'https://www.aliyun.com/product/live'
			// 			},
			// 			{
			// 				adVideo: 'https://player.alicdn.com/resource/player/qupai.mp4',
			// 				adVideoLink: 'https://www.aliyun.com/product/live2'
			// 			},
			// 			{
			// 				adVideo: 'https://player.alicdn.com/audio/guanggao.mp4',
			// 				adVideoLink: 'https://www.aliyun.com/product/live3'
			// 			}
			// 		], manyVideoAdClose, 'VIP关闭广告'
			// 	]
			// }],
			"extraInfo": {
				"crossOrigin": "anonymous"
			},
			"skinLayout": [{
				"name": "bigPlayButton",
				"align": "blabs",
				"x": 30,
				"y": 80
			},
			{
				"name": "H5Loading",
				"align": "cc"
			},
			{
				"name": "errorDisplay",
				"align": "tlabs",
				"x": 0,
				"y": 0
			},
			{
				"name": "infoDisplay"
			},
			{
				"name": "tooltip",
				"align": "blabs",
				"x": 0,
				"y": 56
			},
			{
				"name": "thumbnail"
			},
			{
				"name": "controlBar",
				"align": "blabs",
				"x": 0,
				"y": 0,
				"children": [{
					"name": "progress",
					"align": "blabs",
					"x": 0,
					"y": 44
				},
				{
					"name": "playButton",
					"align": "tl",
					"x": 15,
					"y": 12
				},
				{
					"name": "timeDisplay",
					"align": "tl",
					"x": 10,
					"y": 7
				},
				{
					"name": "fullScreenButton",
					"align": "tr",
					"x": 10,
					"y": 12
				},
				{
					"name": "subtitle",
					"align": "tr",
					"x": 15,
					"y": 12
				},
				{
					"name": "setting",
					"align": "tr",
					"x": 15,
					"y": 12
				},
				{
					"name": "volume",
					"align": "tr",
					"x": 5,
					"y": 10
				},
				{
					"name": "snapshot",
					"align": "tr",
					"x": 10,
					"y": 12
				}
				]
			}
			]
		}, function (player) {
			//console.log("The player is created");
			player.play();
		});
		this.player = player;

		/* h5截图按钮, 截图成功回调 */
		player.on('snapshoted', function (data) {
			var pictureData = data.paramData.base64
			var downloadElement = document.createElement('a')
			downloadElement.setAttribute('href', pictureData)
			var fileName = 'Aliplayer' + Date.now() + '.png'
			downloadElement.setAttribute('download', fileName)
			downloadElement.click()
			pictureData = null
		});
		}else if(res0.code==-2){
			this.$dialog.alert({title:"温馨提示",message:"请购买后再来观看！"}).then(()=>{
				this.$router.back();
			})
			return;
		}
		else if(res0.code==-5){
			this.$dialog.alert({title:"温馨提示",message:"没有查询到你兑换了课程和可能使用期限已到或没到！"}).then(()=>{
				this.$router.back();
			})
			return;
		}else if(res0.code==-1){
            this.$dialog.alert({title:"温馨提示",message:"没有获取到数据，请稍后再试！"}).then(()=>{
				this.$router.back();
			})
			return;
		}else if(res0.code==2){
			this.category_id=res0.data.category_id;
			this.try_time=res0.data.try_time;
			this.item = res0.data;
		    let audio = this.item.audio;
		    let path = audio.path + audio.name;
		    let res = await this.getSignatureUrl(path);
		    /* Custom events for skipping ads. These parameters are provided by the many video ad component. */
		var manyVideoAdClose = function (manyVideoAd) {
			/* Register the pause event to pause the ad. */
			manyVideoAd.pauseManyVideoAd()
			var result = confirm('确定开通会员关闭广告吗？')
			if (result) {
				/* Register the skip event to skip the ad. */
				manyVideoAd.closeManyVideoAd()
			} else {
				/* Register the play event to play the ad. */
				manyVideoAd.playManyVideoAd()
			}
		}
		let config={
			id: "player-con",
			source: res, //播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
			"width": "100%",
			"height": "210px",
			"autoplay": true,
			"isLive": false,
			"rePlay": false,
			"playsinline": true,
			"preload": true,
			"controlBarVisibility": "hover",
			"useH5Prism": true,
			// components: [{ //广告插件
			// 	name: 'ManyVideoADComponent',
			// 	type: AliPlayerComponent.ManyVideoADComponent,
			// 	args: [
			// 		[{
			// 				adVideo: 'https://alivc-demo-cms.alicdn.com/video/videoAD.mp4',
			// 				adVideoLink: 'https://www.aliyun.com/product/live'
			// 			},
			// 			{
			// 				adVideo: 'https://player.alicdn.com/resource/player/qupai.mp4',
			// 				adVideoLink: 'https://www.aliyun.com/product/live2'
			// 			},
			// 			{
			// 				adVideo: 'https://player.alicdn.com/video/guanggao.mp4',
			// 				adVideoLink: 'https://www.aliyun.com/product/live3'
			// 			}
			// 		], manyVideoAdClose, 'VIP关闭广告'
			// 	]
			// }],
			"extraInfo": {
				"crossOrigin": "anonymous"
			},
			"skinLayout": [{
				"name": "bigPlayButton",
				"align": "blabs",
				"x": 30,
				"y": 80
			},
			{
				"name": "H5Loading",
				"align": "cc"
			},
			{
				"name": "errorDisplay",
				"align": "tlabs",
				"x": 0,
				"y": 0
			},
			{
				"name": "infoDisplay"
			},
			{
				"name": "tooltip",
				"align": "blabs",
				"x": 0,
				"y": 56
			},
			{
				"name": "thumbnail"
			},
			{
				"name": "controlBar",
				"align": "blabs",
				"x": 0,
				"y": 0,
				"children": [{
					"name": "progress",
					"align": "blabs",
					"x": 0,
					"y": 44
				},
				{
					"name": "playButton",
					"align": "tl",
					"x": 15,
					"y": 12
				},
				{
					"name": "timeDisplay",
					"align": "tl",
					"x": 10,
					"y": 7
				},
				{
					"name": "fullScreenButton",
					"align": "tr",
					"x": 10,
					"y": 12
				},
				{
					"name": "subtitle",
					"align": "tr",
					"x": 15,
					"y": 12
				},
				{
					"name": "setting",
					"align": "tr",
					"x": 15,
					"y": 12
				},
				{
					"name": "volume",
					"align": "tr",
					"x": 5,
					"y": 10
				},
				{
					"name": "snapshot",
					"align": "tr",
					"x": 10,
					"y": 12
				}
				]
			}
			]
		};
		let player = new Aliplayer(config, (player)=> {
			player.play();
			player.on('timeupdate',()=>{
				let curtime = parseInt(player.getCurrentTime());
				if(curtime >= this.try_time){
                    document.querySelector('audio').style.display = 'none';
					document.querySelector('.prism-big-play-btn').style.width = '0';
					player.dispose();
					this.seeEnd=true;
					this.$dialog.alert({title:"温馨提示",message:"试看时间已经到了，请购买再来观看"}).then(()=>
					{
						this.$router.back();
					});
					// player.off('timeupdate') // 取消订阅该事件
				}
			});
		});
		// document.querySelector('.tip-box').addEventListener('click', function () {
        //     console.log('试看结束弹窗click事件')
        // })
		this.player = player;
		/* h5截图按钮, 截图成功回调 */
		player.on('snapshoted', function (data) {
			var pictureData = data.paramData.base64
			var downloadElement = document.createElement('a')
			downloadElement.setAttribute('href', pictureData)
			var fileName = 'Aliplayer' + Date.now() + '.png'
			downloadElement.setAttribute('download', fileName)
			downloadElement.click()
			pictureData = null
		});
		}else{
			this.$dialog.alert({title:"温馨提示",message:"请购买后再来观看！"}).then(()=>{
			this.$router.back();
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.audiocontentpage {
	.van-cell__title {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.van-cell_righticon {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.fixaudiocontent {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 50px;
		border-top: 1px solid #eee;
		line-height: 50px;
		display: flex;
		text-align: center;
		font-size: 12px;
	}
}

.btn {
	border-radius: 1rem;
	width: 3.5rem
}

.van-cell__title {
	font-size: 8px;
	color: #aaa;
}
</style>
